Component({
  properties: {
    items: {
      type: Array,
      value: []
    },
    type: {
      type: String,
      value: 'basic' // basic, waterfall, bordered
    }
  },

  methods: {
    onStepperChange(e) {
      const { value } = e.detail;
      const index = e.currentTarget.dataset.index;
      this.triggerEvent('change', {
        index,
        value,
        item: this.data.items[index]
      });
    },

    getBorderedClass(index) {
      const classes = [];
      if (index === 0) classes.push('first');
      if (index === 2) classes.push('top-right');
      if (index === 6) classes.push('bottom-left');
      if (index === 8) classes.push('bottom-right');
      return classes.join(' ');
    }
  }
})